<template>
	<view class="personalCationer">
		<view class="user_info">
			<!-- 头像 -->
			<view class="user_Image" @click="toLogin()">
				<image :src="userInfo.avatarUrl" mode="" v-if="userInfo.nickName"></image>
				<text v-else>请先登录</text>
			</view>
			<!-- 用户名 -->
			<view class="user_name">
				<text>{{ userInfo.nickName ? userInfo.nickName : '游客' }}</text>
				<text>用户权限</text>
			</view>
			<!-- 等级 -->
			<view class="user_level">
				<text>健康币:0</text>
				<text>成长值:0</text>
			</view>
			<view class="waves"><!-- 水波动画预留地 --></view>
		</view>
		<!-- 我的订单 -->
		<view class="order">
			<view class="order_header">
				<text class="order_my">我的订单</text>
				<text class="order_all">查看全部订单</text>
			</view>
			<view class="order_operation">
				<view class="order_operation_item">
					<image src="../../static/icon_image/zhangdan_o.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="order_operation_item">
					<image src="../../static/icon_image/daifahuo.png" mode=""></image>
					<text>待发货</text>
				</view>
				<view class="order_operation_item">
					<image src="../../static/icon_image/fahuo.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="order_operation_item">
					<image src="../../static/icon_image/pingjia.png" mode=""></image>
					<text>待评价</text>
				</view>
			</view>
		</view>
		<!-- 其他功能 -->
		<view class="other">
			<view class="other_item" >
				<image src="../../static/icon_image/gouwuchekong.png" mode="" @click="toCart"></image>
				<text>购物车</text>
			</view>
			<view class="other_item">
				<image src="../../static/icon_image/shoucang.png" mode=""></image>
				<text>我的收藏</text>
			</view>
			<view class="other_item">
				<image src="../../static/icon_image/zhufangbutiemingxi.png" mode=""></image>
				<text>补贴卷</text>
			</view>
			<view class="other_item noBorder">
				<image src="../../static/icon_image/wenti-m.png" mode=""></image>
				<text>我的问答</text>
			</view>
			<view class="other_item">
				<image src="../../static/icon_image/zixun.png" mode=""></image>
				<text>用药咨询</text>
			</view>
			<view class="other_item">
				<image src="../../static/icon_image/huiyuan.png" mode=""></image>
				<text>会员中心</text>
			</view>
			<view class="other_item">
				<image src="../../static/icon_image/yiyuan.png" mode=""></image>
				<text>线下药店</text>
			</view>
		</view>
		<!-- 底部信息页 -->
		<view class="foot">
			<view class="foot_title">
				<view class="foot_title_user">
					欢迎您: {{ userInfo.nickName ? userInfo.nickName : '游客' }} |
					<text @click="esc">{{userInfo.nickName?'退出':'请登录'}}</text>
				</view>
				<view class="foot_more">
					<text>关于健客</text>
					|
					<text>帮助中心</text>
				</view>
			</view>
			<view class="foot_container">
				<text class="foot_container_title">关注[健康网上药店] 公众号 ,抢先获得特价活动通知</text>
				<text>健康全国免费专线 400-0865-111</text>
				<text>药品交易资格证 粤C201400009</text>
				<text>Copright 2009-2020 版权所有</text>
				<text>健客隐私政策 | 健客服务条款</text>
			</view>
		</view>
	</view>

</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
		};
	},
	mounted() {
		this.getUserIno();
	},
	methods: {
		// 获得本地数据
		getUserIno() {
			this.userInfo = uni.getStorageSync('userInfo');
		},
		toCart(){
			uni.reLaunch({
				url:'../cart/cart'
			})
		},
		// 登录跳转
		toLogin() {
			if (this.userInfo.nickName) {
				return;
			}
			uni.navigateTo({
				url: '../login/login'
			});
		},
		// 退出登录
		esc() {
			if(!this.userInfo.nickName){
				uni.navigateTo({
					url: '../login/login'
				});
				return
			}
			uni.showModal({
			    content: '确认退出',
			    success: (res)=> {
			        if (res.confirm) {
			            // 清data
			            this.userInfo = {};
			            // 清本地
			            uni.removeStorageSync('userInfo');
			        }
			    }
			});
			
		}
	}
};
</script>


<style lang="scss">
// 个人页
page {
	background-color: #eee;
}
.personalCationer {
	.user_info {
		background-color: #fff;
		padding-top: 15upx;
		background-color: rgb(16, 150, 250);
		height: 320upx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		.user_Image {
			text-align: center;
			margin-top: 20upx;
			margin-bottom: 10upx;
			width: 100%;
			height: 150upx;
			image {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
			}
			text {
				display: inline-block;
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				background-color: #fff;
				text-align: center;
				line-height: 150upx;
			}
		}
		.user_name,
		.user_level {
			font-size: 24upx;
			margin: 5upx 0;
			color: #ffffff;
			text {
				margin-right: 10upx;
			}
		}
	}
	.order {
		background-color: #fff;
		margin-bottom: 20upx;
		.order_header {
			padding: 0 10upx;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			// flex-direction: column;
			border-bottom: 1upx solid #c0c0c0;
			text {
				height: 80upx;
				line-height: 80rpx;
				padding: 0 10upx;
			}
			.order_my {
				// height: 80upx;
				// line-height: 80upx;
				font-size: 30upx;
			}
			.order_all {
				// height: 80upx;
				// line-height: 80rpx;
				font-size: 26upx;
				color: #666;
			}
		}
		.order_operation {
			width: 100%;
			height: 120upx;
			display: flex;
			justify-content: space-between;
			//flex-direction: column; 这是主轴纵向
			.order_operation_item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					margin: 10upx 0;
					width: 44upx;
					height: 44upx;
				}
				text {
					font-size: 24upx;
				}
			}
		}
	}
	// 其他功能页
	.other {
		background-color: #fff;
		width: 100%;
		// height: 100%;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		//flex-direction: column; 这是主轴纵向
		.other_item {
			// float: left;
			width: 25%;
			box-sizing: border-box;
			// padding: 10upx 0;
			border-bottom: 1upx solid #c0c0c0;
			border-right: 1upx solid #c0c0c0;
			display: flex;
			flex-direction: column;
			align-items: center;
			&.noBorder {
				border-right: none;
			}
			image{
				margin-top: 30upx;
				width: 48upx;
				height: 48upx;
			}
			text {
				font-size: 24upx;
				margin-bottom: 30upx;
			}
		}
	}
	// 底部
	.foot {
		margin-top: 16upx;
		background-color: #fff;
		.foot_title {
			padding: 0 10upx;
			display: flex;
			height: 100upx;
			line-height: 100upx;
			justify-content: space-between;
			font-size: 24upx;
			color: #666;


			text {
				padding: 0 10upx;
			}
		}
		.foot_container {
			display: flex;
			padding-bottom: 30upx;
			flex-direction: column;
			align-items: center;
			.foot_container_title {
				font-size: 30upx;
				color: #007aff;
				padding-bottom: 10upx;
			}
			text {
				font-size: 24upx;
				color: #666;
			}
		}
	}
	.popup {
		padding: 20upx 40upx;
		text {
			margin-top:20upx ;
			font-size: 40upx;
			margin-bottom: 20upx;
		}
		view {
			padding: 40upx 0 0 0;
			display: flex;
			button {
				font-size: 30upx;
			}
		}
	}

}
</style>